<template>
  <div id="index-alarm" class="index-alarm jeecg-basic-table">
    <!-- <div class="more" @click="go('/pumpRoom/alarm/lists')">
      <span>更多</span>
    </div> -->
    <div class="tip">
      <span>报警列表</span>
      <span class="tip-img"></span>
    </div>
    <div class="p-2">
      <a-table
        ref="alarmTable"
        :loading="loading"
        rowKey="id"
        :dataSource="dataSource"
        :columns="columns"
        :pagination="false"
        size="small"
        :scroll="{ y: tableHeight }"
      >
        <template v-slot:bodyCell="{ column, record, index }">
          <template v-if="column.dataIndex == 'action'">
            <a href="javascript:void(0);" @click="onDetail(record)">查看</a>
            <template v-if="weightAlarmAssgin">
              <a-divider type="vertical" />
              <a href="javascript:void(0);" @click="onUpdate(record)">处理</a>
            </template>
          </template>
        </template>
      </a-table>
    </div>
    <AlarmInfo ref="alarmInfo" />
  </div>
</template>

<script>
import { ref, nextTick, computed, onMounted, getCurrentInstance, defineComponent } from 'vue';
import { render } from '/@/utils/common/renderUtils';
import { usePermission } from '/@/hooks/web/usePermission';
import { useUserStore } from '/@/store/modules/user';
import { alarmPageApi } from '/@/api/alarm/index';
import AlarmInfo from '/@/components/AlarmInfo/index.vue';
import { useGo } from '/@/hooks/web/usePage';
export default defineComponent({
  components: { AlarmInfo },
  setup() {
    const userStore = useUserStore();

    const go = useGo();

    const { hasPermission } = usePermission();

    const weightAlarmAssgin = computed(() => {
      return hasPermission('alarm:assign');
    });

    let { proxy } = getCurrentInstance();

    let loading = ref(false);

    let dataSource = ref([]);

    let columns = ref([
      {
        title: '序号',
        align: 'center',
        customRender: ({ index }) => `${index + 1}`,
      },
      {
        title: '设备名称',
        align: 'center',
        dataIndex: 'equipmentName',
      },
      {
        title: '站点名称',
        align: 'center',
        dataIndex: 'stationCode',
        customRender: ({ text }) => {
          if (userStore.getStationList) {
            let data = userStore.getStationList.find((_) => _.stationCode == text);
            if (data) {
              return data.name;
            } else {
              return '-';
            }
          } else {
            return '-';
          }
        },
      },
      {
        title: '报警级别',
        align: 'center',
        dataIndex: 'level',
        customRender: ({ text }) => {
          return render.renderDict(text, 'alarm_level');
      },
      },
      {
        title: '报警类型',
        align: 'center',
        dataIndex: 'alarmType',
        customRender: ({ text }) => render.renderDict(text, 'alarm_type'),
      },
      {
        title: '处理结果',
        align: 'center',
        dataIndex: 'handleResult',
        customRender: ({ text }) => {
          return render.renderDict(text, 'alarm_handle_result');
        },
      },
      {
        title: '操作',
        dataIndex: 'action',
        align: 'center',
      },
    ]);

    let tableHeight = ref(0);

    /**
     * 初始化告警列表
     */
    function init() {
      alarmPageApi({current: 1,size: 10}).then((res) => {
        dataSource.value = res.records;
      });
    }

    /**
     * 获取表格高度
     */
    function getTableHeight() {
      tableHeight.value = document.getElementById('index-alarm').offsetHeight - 105;
    }

    /**
     * 查看详情
     */
    function onDetail({ id }) {
      proxy.$refs.alarmInfo.visible = true;
      nextTick(() => {
        proxy.$refs.alarmInfo.init(id, false);
      });
    }

    /**
     * 更新告警数据
     */
    function onUpdate({ id }) {
      proxy.$refs.alarmInfo.visible = true;
      nextTick(() => {
        proxy.$refs.alarmInfo.init(id, true);
      });
    }

    onMounted(() => {
      init();
      window.addEventListener('size', getTableHeight);
      getTableHeight();
    });

    return {
      loading,
      dataSource,
      columns,
      tableHeight,
      weightAlarmAssgin,
      onDetail,
      onUpdate,
      go,
    };
  },
});
</script>

<style lang="less" scoped>
.index-alarm {
  position: relative;
  height: calc(45vh - 175px);
  margin: 15px 0 0 0;
  background: #fff;
  width: 100%;
  .tip{
    height:50px;
  }
  // &::before {
  //   content: '报警列表';
  //   display: block;
  //   width: 100%;
  //   height: 44px;
  //   padding: 0 0 0 44.3px;
  //   background: url('@/assets/images/img-14.png') no-repeat;
  //   background-size: 100% 100%;
  //   color: #fff;
  //   line-height: 44px;
  // }
  .more {
    position: absolute;
    top: 12px;
    right: 27px;
    color: #fff;
    cursor: pointer;
    &:hover {
      color: rgb(240, 240, 240);
    }
  }
  .p-2{
    padding: 0 0.5rem;
  }
  :deep(.ant-table) {
    .ant-table-thead {
      .ant-table-cell {
        background: rgba(42, 130, 228, 1);
        // color: #fff;
      }
    }
  }
}
</style>